<template>
    <div class="content">
        <div class="list_hot">
            <div class="Card-header_card">
                <div class="card-title">
                    <span class="title_SE4va">{{ $t('premium_recommendation') }}</span>
                </div>
                <div class="recharge_content">
                    <div class="mian_item" v-for="item in game_list" :key="item.id">
                        <div @click="$router.push(`/home/gameCenter/${item.id}`)" class="img" :style="`background-image:url(${$baseUrl+item.home_jp_img})`"></div>
                        <div class="text">
                            <p>{{ item.title }}</p>
                            <div class="btn" @click="open_game(item.id,item.title,item.pixel_code)">
                                <button>{{ $t('play_game') }}</button
                            ></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        
    </div>
</template>

<script setup>
import axios from '@/utils/api'
import { reactive,ref } from "vue";
import {useGetGameUrl} from '@/hooks/getGameUrl'
import { useUserInfoStore } from '@/store/modules/user_info/index';
import { useRouter } from "vue-router"
const router = useRouter()
const user_infoStore = useUserInfoStore();
const userInfo = reactive(user_infoStore.userInfo)
const open_game = async (game_id,game_name,pixel_code) => {
    const url = router.resolve({ path: '/playgame',query: { id: game_id,game_name: game_name,pixel_code } }).href;
    window.open(url)
}

const game_list = reactive([])
const getList = async () =>{
    const list = await axios.get('/gameBoutiqueList')
    Object.assign(game_list,list.data.data)
    console.log(game_list);
}
getList()
</script>

<style lang="less" scoped>
.content {
    width: 95%;
    // height: 500px;
    // background-color: rgb(34, 192, 165);
    margin-top: 16px;
    .list_hot{
    
        margin-bottom: 20px;
        .card-title{
            position: relative;
            .nav{
                display: inline-flex;
                font-size: 15px;
                p{
                    margin-left: 15px;
                    cursor: pointer;
                }
                p:hover{
                    color:rgb(11, 145, 241) ;
                }
                .active{
                    color:rgb(11, 145, 241) ;
                }
            }
        }
        .title_SE4va {
            font-size: 23px;
            font-weight: bold;
            background: linear-gradient(90deg, #ff7e5f, #feb47b); /* 渐变背景 */
            -webkit-background-clip: text; /* 文字渐变 */
            background-clip: text;
            color: transparent; /* 隐藏原文字颜色 */
            letter-spacing: 1px;
            line-height: 32px;
            position: relative;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* 文字阴影 */
            filter: brightness(1.1);
        }

        .title_SE4va::before {
            content: '🎮'; /* 图标装饰 */
            margin-right: 10px;
            background: transparent !important;
            color: @primary-color;
        }
        .recharge_content{
            margin-top: 15px;
            display: grid;
            grid-template-columns: repeat(4,1fr);
            column-gap: 15px;
            
            .mian_item{
                width: 200px;
                margin: 0;
                overflow: hidden;
                border-radius: 12px;
                transition: all .3s;
                &:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 4px 12px rgba(107, 107, 107, 0.3);
                }
                .img{
                    width: 200px;
                    height: 200px;
                    background-color: #b1b1b1;
                    background-size: cover;
                    margin: 0;
                    border-radius: 12px 12px 0 0;
                    cursor: pointer;
                    transition: all .3s;
                    
                }
                .img:hover{
                    transform: scale(1.2);
                }
                .text{
                    display: flex;
                    align-items: center;
                    width: 198px;
                    margin: 0;
                    border: 1px solid #ccc;
                    padding: 10px 0;
                    height: 35px;
                    border-radius: 0 0 12px 12px;
                    position: relative;
                    z-index: 99;
                    background-color: white;
                    p{
                        width: 40%;
                        font-size: 13px;
                        margin: 0 auto !important;
                    }
                    .btn{
                        text-align: right;
                        button{
                            color: #44a6f5;
                            background-color: transparent;
                            border: 1px solid;
                            padding: 3px 10px;
                            border-radius: 5px;
                            cursor: pointer;
                        }
                        button:hover{
                            background-color: #44a6f5;
                            color: white;
                        }
                    }
                }
            }
        }
    }
}
</style>